<template>
    <view class="flex-row align-c wh-auto pr " :style="propStyle">
        <view class="bg-white wh-auto ht-auto flex-row align-c gap-5 oh">
            <template v-if="isEmpty(form_value)">
                <view class="flex-1 flex-row align-c ht-auto gap-5 oh cr-gray">
                    <view class="flex-1 flex-row align-c jc-c" :data-index="0" @tap="data_time_change">
                        <view class="text-line-1">{{ com_data.start_placeholder }}</view>
                    </view>
                    <view class="flex-1 flex-row align-c jc-c" :data-index="1" @tap="data_time_change">
                        <view class="text-line-1">{{ com_data.end_placeholder }}</view>
                    </view>
                </view>
            </template>
            <template v-else>
                <view class="datetime-value flex-1 flex-row align-c ht-auto gap-5 oh">
                    <view class="flex-1 flex-row align-c jc-c ht-auto nowrap text-line-1" :data-index="0" @tap="data_time_change">{{ form_value[0] || '' }}</view>-
                    <view class="flex-1 flex-row align-c jc-c ht-auto nowrap text-line-1" :data-index="1" @tap="data_time_change">{{ form_value[1] || '' }}</view>
                </view>
            </template>
            <iconfont :name="'icon-'+ com_data.icon_name" class="ml-5" size="28rpx" color="#333333" />
        </view>
        <template v-if="['option1', 'option2'].includes(date_type)">
            <myDatetime ref="option4" dataType="time" :shownum="date_type == 'option1' ? 2 : 3" @timeSubmit="data_change" @maskClick="mask_click"></myDatetime>
        </template>
        <template v-else-if="date_type == 'option3'">
            <myDatetime ref="option4" :shownum="2" @timeSubmit="data_change" @maskClick="mask_click"></myDatetime>
        </template>
        <template v-else>
            <view class="datetime-picker">
                <uni-datetime-picker ref="option4" :value="form_value" :border="false" :type="date_type == 'option4' ? 'daterange' : 'datetimerange'" :hideSecond="date_type !== 'option6'" @change="data_date_change"  @maskClick="mask_click" />
            </view>
        </template>
    </view>
</template>

<script>
    import { get_format_checks, isEmpty, time_stamp } from '@/common/js/common/common.js';
    import myDatetime from '@/pages/form-input/components/form-input/modules/my-datetime.vue';
    export default {
        components: {
            myDatetime
        },
        props: {
            propValue: {
                type: Object,
                default: () => ({}),
            },
            propKey: {
                type: [String, Number],
                default: 0,
            },
            propDataId: {
                type: String,
                default: '',
            },
            propStyle: {
                type: String,
                default: '',
            }
        },
        data() {
            return {
                placeholder: '请输入内容...',
                form_value: '',
                form_index: 0,
                com_data: {},
                date_style: '',
                date_type: 'option1',
            };
        },
        watch: {
            propValue: {
                handler(newVal) {
                    this.init();
                },
                deep: true
            },
            propKey(val) {
                // 初始化
                this.init();
            },
        },
        mounted() {
            this.init();
        },
        methods: {
            isEmpty,
            init() {
                const com_data = this.propValue;
                const date_list = [];
                if (!isEmpty(com_data.form_value)) {
                    com_data.form_value.forEach((item, index) => {
                        date_list[index] = time_stamp(item, com_data.date_style, com_data.date_type);
                    })
                }
                this.$nextTick(() => {
                    this.setData({
                        com_data: com_data,
                        placeholder: com_data?.placeholder,
                        form_value: date_list, 
                        date_style: com_data.date_style,
                        date_type: com_data.date_type,
                    });
                });
            },
            data_time_change(e) {
                // 进行操作时，将当前组件的层级调到最高，避免弹出框被其他的盖住
                this.z_index_change(this.propDataId);
                if (['option1', 'option2', 'option3'].includes(this.date_type)) {
                    const index = e.currentTarget.dataset.index;
                    const val = this.form_value[index] || '';
                    this.setData({
                        form_index: e.currentTarget.dataset.index,
                    });
                    this.$refs.option4.open(val);
                } else {
                    this.$refs.option4.show();
                }
            },
            data_check(e) {
                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, e.detail.value);
                this.$emit('dataCheck', { is_error, error_text, value: e.detail.value, id: this.propDataId });
            },
            data_change(e) {
                const date = time_stamp(e, this.date_style, this.date_type);
                const value = this.form_value;
                value[this.form_index] = date;
                const new_time_data = this.date_handle(value[0], value[1]);
                // 重新编辑一下历史数据
                this.setData({
                    form_value: new_time_data,
                });
                // 数据发生变化之后再改回原样
                this.z_index_change('');
                // 执行校验逻辑
                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, new_time_data, false, 'time');
                // 校验数据
                this.$emit('dataCheck', { is_error, error_text, value: new_time_data, id: this.propDataId });
                // 发送数据
                // this.$emit('dataChange', { value: new_time_data, id: this.propDataId });
            },
            date_handle(time0, time1) {
                if (isEmpty(time0) || isEmpty(time1)) {
                    if (isEmpty(time0)) {
                        return [time1, time1];
                    } else {
                        return [time0, time0];
                    }
                } else {
                    let time_date0 = new Date(time0);
                    let time_date1 = new Date(time1);
                    if (['option1', 'option2'].includes(this.date_type)) {
                        const time_0 = '1970-01-01 ' + time0.replace(/时|分|秒/g, ':').replace(/:+$/, '');
                        const time_1 = '1970-01-01 ' + time1.replace(/时|分|秒/g, ':').replace(/:+$/, '');
                        time_date0 = new Date(time_0);
                        time_date1 = new Date(time_1);
                    } else {
                        time_date0 = new Date(time0);
                        time_date1 = new Date(time1);
                    }
                    // 如果开始时间大于结束时间，开始时间就是结束时间
                    if (time_date0 > time_date1) {
                        return [time1, time1];
                    } else if (time_date1 < time_date0) {
                        // 如果结束时间小于开始时间，结束时间就是开始时间
                        return [time0, time0];
                    } else {
                        // 否则的话，返回原本的数据
                        return [time0, time1];
                    }
                }
            },
            data_date_change(e) { 
                let date = [];
                e.forEach((item, index) => {
                    date[index] = time_stamp(item, this.date_style, this.date_type);
                })
                // 重新编辑一下历史数据
                this.setData({
                    form_value: date,
                });
                this.z_index_change('');
                // 执行校验逻辑
                const { is_error = '0', error_text = '' } = get_format_checks(this.com_data, date, false, 'time');
                // 校验数据
                this.$emit('dataCheck', { is_error, error_text, value: date, id: this.propDataId });

                // this.$emit('dataChange', { value: date, id: this.propDataId });
            },
            mask_click() {
               this.z_index_change('');
            },
            /**
             * 有值的时候就是将当前组件的层级调到最高，没有值的时候就是将当前组件的层级调回原样，避免弹出框出来的时候被其他组件盖住或悬浮在弹出框外部
             */
            z_index_change(e) {
                // 如果为空的时候延时关闭，避免因为关闭动画效果导致其他组件提前显示
                if (e == '') {
                    setTimeout(() => {
                        this.$emit('zIndexChange', e);
                    }, 400)
                } else {
                    this.$emit('zIndexChange', e);
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
::v-deep .uniui-calendar::before {
    content: '',
}
/* #ifdef H5 */
.datetime-picker {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    ::v-deep .uni-date-editor {
        visibility: hidden;
    }
}
/* #endif */
/* #ifndef H5 */
.datetime-picker {
    position: absolute;
    top: 160rpx;
    left: 0;
    width: 0;
}
/* #endif */
.datetime-value {
    color: #606266;
    line-height: 1.5;
}
</style>